<template>
	<!-- 巡检明细(列表) -->
	<view class="check-assets">
		<uni-card :title="topDetail?.inspPlanName">
			<template v-slot:title>
				<view class="card-title">
					<view>
						<text>{{topDetail?.inspPlanName}}</text>
					</view>
					<text class="right-txt color1">{{topDetail?.groupStatusCh||'--'}}</text>
					<!-- <text class="right-txt color1">{{topDetail?.inspRecordStatusCn||'--'}}</text> -->
				</view>
			</template>
			<uni-list :border="false">
				<uni-list-item>
					<template v-slot:body>
						<view class="slot-box">
							<view>
								<uni-icons type="shop-filled" size="18" color="#198a6c"></uni-icons>
								<text>{{topDetail?.storeName || '--'}}</text>
							</view>
							<view class="check-name">
								<uni-icons type="calendar" size="14"></uni-icons>
								{{topDetail?.inspStartTime?topDetail.inspStartTime.replace(/T/," "):'--'}} 至
								{{topDetail?.inspEndTime?topDetail.inspEndTime.replace(/T/," "):'--'}}
							</view>
							<view class="check-name">
								<uni-icons type="compose" size="14"></uni-icons>{{topDetail?.remarks||'--'}}
							</view>
						</view>
					</template>
				</uni-list-item>
			</uni-list>
		</uni-card>

		<view class="content">
			<uni-card v-for="(item,index) in assetsList" :key="index">
				<uni-list :border="false">

					<uni-list-item>
						<template v-slot:footer>
							<text class="top-text">{{item.inspRecordStatusCn}}</text>
						</template>
					</uni-list-item>

					<uni-list-item :title="'计划巡检时间:'+item.planExecStart">
					</uni-list-item>

					<uni-list-item :border="false" :title="'~'+item.planExecEnd">
					</uni-list-item>

					<uni-list-item :border="false"
						:title="'实际巡检时间:'+(item.execuTime?item.execuTime.replace(/T/g,' '):'--')" />
					<uni-list-item :border="false" :title="'总巡检项:'+(item.inspItemQty?item.inspItemQty:'--')" />
					<uni-list-item :border="false" :title="'合格项:'+(item.inspItemOkQty?item.inspItemOkQty:'--')" />
					<uni-list-item :border="false"
						:title="'不合格项:'+(item.inspItemNgQty?item.inspItemNgQty:'--')+(item.rectifyStatusCn?(' ('+item.rectifyStatusCn+')'):'')">
						<template v-slot:footer>
							<button class="list-btn" @click="toInspect(item)"
								v-if="item.status==1||item.status==2||item.status==3||item.status==4">巡检</button>
							<button :class="{'list-btn':true,'permission-none':isPermission('INSP_RECORD_DTL_QUERY')}"
								@click="toSee(item)">查看</button>
							<button class="list-btn" @click="toInspectHand(item)"
								v-if="item.rectifyStatus==2||item.rectifyStatus==3||item.rectifyStatus==4||item.rectifyStatus==7">整改</button>
						</template>
					</uni-list-item>
				</uni-list>
			</uni-card>
		</view>
		<!-- 加载结束 -->
		<view class="uni-loadmore" v-if="showLoadMore">{{loadMoreText}}</view>
	</view>
</template>

<script lang="ts" setup>
	import {
		ref
	} from "vue";
	import {
		onPullDownRefresh,
		onReachBottom,
		onLoad,
		onShow,
		stopPullDownRefresh,
		onBackPress,
		onUnload
	} from "@dcloudio/uni-app";
	import {
		CONSTANT
	} from '@/common/config/config.ts'
	import {
		fromSearch
	} from '@/common/util/tabSearchUse.ts';
	import {
		detailList,
		inspectionListDetail,
		getMainInfo
	} from '@/common/api/inspectionAPI.ts';
	import {
		isPermission
	} from '@/common/util/common.ts'

	let assetsList = ref([])
	const topDetail = ref()
	let showLoadMore = ref(false)
	let loadMoreText = ref('加载中...')
	const page = ref(CONSTANT.initPage); //初始加载页码
	const rows = ref(CONSTANT.pageSize);
	const allPages = ref(0); //总页码数
	const searchParams = ref({
		status: null

	}); //查询条件
	const matchRule = {
		status: 'eq'
	}; //匹配条件

	const toChangePoint = () => {
		uni.navigateTo({
			url: `/pages/ipqc/changePoint/index`
		})
	}

	const lastData = ref({})

	onBackPress((e) => {
		uni.redirectTo({
			url: `/pages/ipqc/index`
		})
		return true;
	})

	onShow(() => {
		uni.getStorage({
			key: 'inspectDetail',
			success: function(res) {
				console.log(res.data);
				if (res.data == 'true') {
					uni.setStorage({
						key: 'inspectDetail',
						data: 'false'
					})
					location.reload();
				}
			}
		})
		getCheckDetailList()
		getTopDetail()
	})
	onLoad((params) => {
		lastData.value = JSON.parse(params.rowData)
		getCheckDetailList()
		getTopDetail()
	})
	onUnload(() => {
		uni.removeStorageSync('inspectDetailParams');
	})
	const getTopDetail = () => {
		if (!isPermission('INSP_RECORD_DTL_QUERY')) {
			inspectionListDetail(lastData.value.inspPlanId, lastData.value.inspStoreId).then((res: any) => {
				if (res.code == 0) {
					// console.log(res.data);
					topDetail.value = res.data.inspectionPlanResponse
					topDetail.value.storeName = res.data.scmStoreResponse.storeName
					topDetail.value.inspRecordStatusCn = res.data.inspRecords[0].inspRecordStatusCn
					topDetail.value.groupStatusCh = res.data.groupStatusCh
				}
			})
		} else {
			uni.showToast({
				title: '没有权限！',
				icon: "none"
			})
		}

	}
	const getCheckDetailList = () => {
		let config = {
			page: page.value,
			rows: rows.value,
			inspPlanId: lastData.value.inspPlanId,
			inspStoreId: lastData.value.inspStoreId
		}
		const params = Object.assign(fromSearch(searchParams.value, matchRule), config)
		if (!isPermission('INSP_RECORD_LIST_QUERY')) {
			loadMoreText.value = '加载中...'
			detailList(params).then((res: any) => {
				uni.stopPullDownRefresh(); //关闭下拉
				if (res.code == 0) {
					allPages.value = res.data.pages;
					page.value = res.data.current;
					let list: any[] = res.data.records;
					// assetsList.value = assetsList.value.concat(list);
					assetsList.value = res.data.records

					if (assetsList.value.length === 0) {
						showLoadMore.value = true;
						loadMoreText.value = '暂无数据'
					} else if (assetsList.value.length < CONSTANT.pageSize) {
						showLoadMore.value = true;
						loadMoreText.value = '没有更多的数据了'
					} else {
						showLoadMore.value = false;
					}
				}
			})
		} else {
			uni.showToast({
				title: '没有权限！',
				icon: "none"
			})
		}

	}

	const changeStatus = (item: {}) => {
		searchParams.value.status = item.value
		getCheckDetailList()
		popupStatus.value.close()
	}

	onPullDownRefresh(() => {
		page.value = CONSTANT.initPage; //重置页码
		assetsList.value = []; //重置列表
		getCheckDetailList();
	});
	onReachBottom(() => {
		//触发底部
		if (page.value > allPages.value || page.value == allPages.value) {
			loadMoreText.value = '没有更多的数据了'
			showLoadMore.value = true;
		} else {
			page.value++;
			loadMoreText.value = '加载中……';
			showLoadMore.value = true;
			getCheckDetailList();
		}

	})

	const toInspect = (item) => {
		// const toData = JSON.stringify(item)
		// uni.navigateTo({
		// 	url: `/pages/ipqc/inspectContent/index?rowData=${toData}`
		// })
		uni.navigateTo({
			url: `/pages/ipqc/inspectContent/index?inspRecordId=${item.inspRecordId}&showType=hand`
		})
	}

	const toInspectHand = (item) => {
		// const toData = JSON.stringify(item)
		// uni.navigateTo({
		// 	url: `/pages/ipqc/changePoint/index?rowData=${toData}`
		// })
		uni.navigateTo({
			url: `/pages/ipqc/changePoint/index?inspRecordId=${item.inspRecordId}`
		})
	}

	const toSee = (item) => {
		// const toData = JSON.stringify(item)
		// uni.navigateTo({
		// 	url: `/pages/ipqc/inspectContent/index?rowData=${toData}`
		// })
		uni.navigateTo({
			url: `/pages/ipqc/inspectContent/index?inspRecordId=${item.inspRecordId}&showType=see`
		})
	}
</script>

<style scoped lang="scss">
	uni-page-body {
		height: 100%;
	}

	.check-assets {
		height: 100%;
		// background-color: #f4f4f4;

		.segmented-control {
			background-color: #fff;
		}
	}

	.content {

		// height: 80%;
		// overflow-y: scroll;
		:deep(.uni-list-item__container) {
			padding: 5px 20rpx !important;
		}

		.uni-list-item {
			&:nth-child(3) {
				:deep(.uni-list-item__content-title) {
					padding-left: 80px !important;
				}
			}
		}

	}

	.card-title {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10px;
		border-bottom: 1px solid #ebeef5;
		position: relative;

		.right-txt {
			font-size: 12px;
			color: #fff;
			padding: 5rpx 20rpx;
			box-sizing: border-box;
			border-radius: 18rpx 0 0 18rpx;
			position: absolute;
			right: -20rpx;
		}

		.color1 {
			background-color: #7098ed;
		}

		.color2 {
			background-color: #999999;
		}
	}

	.uni-list-item {
		font-size: 14px !important;

		.check-time {
			color: #fda659;
		}
	}

	.check-name {
		font-size: 12px;
	}

	.footer-btn {
		display: flex;
	}

	.list-btn {
		background-color: #198a6c;
		color: #fff;
		line-height: 2;
		font-size: 14px;
		margin-left: 10rpx;
	}

	.top-text {
		color: #fd8f1a;
	}
</style>
